<script setup>
// 商品详情页
import {ref, reactive, onMounted, computed} from 'vue'
import MyFooter from '@/components/netshop/footer.vue'
import MyHeader from '@/components/netshop/header.vue'
import useAdminrouter from "@/router/index.js";
import {
  GetDetailMessage
} from '@/api/netshop/homepagemessage.js'

const router = useAdminrouter
const thingId = ref(JSON.parse(localStorage.getItem('petdetailId')))
console.log(thingId)
let tabData = ref(['简介'])
let selectTabIndex = ref(0)
//控制按钮开关
const disabledClick = ref(false)
// console.log(thingId.value.id)
const detailData = ref({})
if (!thingId) {
  router.push('/netshop')
}
const getThingList = async () => {
  const id = thingId.value.id
  await GetDetailMessage(id)
      .then((res) => {
        detailData.value = res.data.data
      }).catch((err) => {
        console.log(err)
      })
}
onMounted(() => {
  getThingList()
})

// 状态枚举数据返回
const statusMap = {
  "1": {text: "未上架", type: 'info'},
  "2": {text: "在售", type: 'success'},
  "3": {text: "已下架", type: 'danger'}
}
// 性别枚举数据返回
const sexMap = {
  "1": "雄性",
  "2": "雌性"
}
const tagStatus = computed(() => {
  const status = detailData.value.status;
  if (status === '2') {
    disabledClick.value = false
  } else {
    disabledClick.value = true
  }
  return statusMap[status] || {text: '未知状态', type: 'info'};
});

// 将详情页的数据传到购物车
const handleOrder = (detailData) => {
  console.log(detailData)
  router.push({
    name: 'comfirm',
    query:
        {
          id: detailData.id,
          img_url: detailData.picture,
          name: detailData.sell_name,
          Totalquantity: detailData.quantity,
          price: detailData.price,
          kind: detailData.catagory,
        }
  })
}
</script>
<template>
  <div class="detail">
    <MyHeader></MyHeader>
    <div class="detail-content">
      <div class="detail-content-top">
        <div style="position: relative;">
          <div class="thing-infos-view">
            <div class="thing-infos">
              <div class="thing-img-box">
                <el-image :src="detailData.picture"/>
              </div>
              <div class="thing-info-box">
                <div class="thing-state">
                  <el-tag type="primary" size="large" style="margin-right: 25px;font-size: 15px">状态</el-tag>
                  <el-tag class="ml-2" :type="tagStatus.type">{{ tagStatus.text }}</el-tag>
                </div>
                <div style="display: flex; align-items: center;margin-top: 20px">
                  <el-tag type="text" size="large" style="margin-right: 8px;font-size: 15px">花名：</el-tag>
                  <h1 class="thing-name" style="margin: 0; font-size: 1.5rem;">{{ detailData.sell_name }}</h1>
                </div>
                <div style="display: flex; align-items: center;margin-top: 10px">
                  <el-tag type="text" size="large" style="margin-right: 8px;font-size: 15px">品种：</el-tag>
                  <h1 class="thing-name">{{ detailData.species }}</h1>
                </div>
                <el-tag type="success" size="large" style="margin-right: 8px;font-size: 15px">价格：</el-tag>
                <span>
                  <span class="a-price-symbol">¥</span>
                  <span class="a-price">{{ detailData.price }}</span>
                </span>
                <div class="translators flex-view" style="">
                  <el-tag type="text" size="large" style="margin-right: 8px;font-size: 15px">性别：</el-tag>

                  <span class="name">{{ sexMap[detailData.sex] }}</span>
                </div>
                <div class="translators flex-view" style="">
                  <el-tag type="text" size="large" style="margin-right: 8px;font-size: 15px">数量：</el-tag>

                  <span class="name">{{ detailData.quantity }}只</span>
                </div>
                <el-button type='primary' style="width: 100px;height: 50px;margin-top: 50px" :disabled="disabledClick"
                           @click="handleOrder(detailData)">
                  <el-icon>
                    <CirclePlus/>
                  </el-icon>
                  立即购买
                </el-button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="detail-content-bottom">
      <div class="thing-content-view flex-view">
        <div class="main-content">
          <div class="order-view main-tab">

            <span class="tab"
                  :class="selectTabIndex===index? 'tab-select':''"
                  v-for="(item,index) in tabData"
                  :key="index"
                  @click="selectTab(index)">
              <el-icon>
              <Reading/>
            </el-icon>
            {{ item }}
          </span>
          </div>
          <!--简介-->
          <div class="thing-intro" :class="selectTabIndex <= 0? '':'hide'">
            <p class="text" style="">{{ detailData.description }}</p>
          </div>
        </div>
      </div>
    </div>
    <MyFooter></MyFooter>
  </div>
</template>

<style scoped>
.hide {
  display: none;
}

.detail-content {
  display: flex;
  flex-direction: column;
  width: 1000px;
  margin: 4px auto;
}

.flex-view {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.hidden-lg {
  display: none !important;
}

.thing-infos-view {
  display: flex;
  margin: 89px -120px 20px;
  overflow: hidden;

.thing-infos {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  display: flex;
}

.mobile-share-box {
  height: 38px;
  background: transparent;
  padding: 0 16px;
  margin: 12px 0;
  font-size: 0;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;


.share-img {
  background: #fff;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  text-align: center;

img {
  position: relative;
  top: 4px;
  width: 24px;
}

}
}

.thing-img-box {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 235px;
  flex: 0 0 235px;
  margin: 0 40px 0 0;

.el-image {
  width: 500px;
  height: 400px;
}

}

.thing-info-box {
  text-align: left;
  padding: 0;
  margin: 0;
}

.thing-state {
  height: 26px;
  line-height: 26px;


span {
  font-size: 14px;
  color: #152844;
}

}

.thing-name {
  line-height: 32px;
  margin: 16px 0;
  color: #0F1111 !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  font-style: normal !important;
  text-transform: none !important;
  text-decoration: none !important;
}

.translators, .authors {
  line-height: 18px;
  font-size: 14px;
  margin: 8px 0;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;

.name {
  margin-left: 5px;
  margin-top: 5px;
  font-size: 20px;
  color: #315c9e;
  white-space: normal;
}

}

.tags {
  position: absolute;
  bottom: 20px;
  margin-top: 16px;

.category-box {
  color: #152844;
  font-size: 14px;

.title {
  color: #787878;
}

}
}

.thing-counts {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 235px;
  flex: 0 0 235px;
  margin-left: 20px;
}

.pointer {
  cursor: pointer;
}

.count-item {
  height: 64px;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  cursor: pointer;
}

.count-img {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 32px;
  flex: 0 0 32px;
  margin-right: 24px;
  font-size: 0;

img {
  width: 100%;
  display: block;
}

}

.count-box {
  position: relative;
  border-bottom: 1px solid #cedce4;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  height: 100%;
}

.count-text-box {
  font-size: 0;

.count-title {
  color: #152844;
  font-weight: 600;
  font-size: 16px;
  line-height: 18px;
  display: block;
  height: 18px;
}

}

.count-num-box {
  font-weight: 600;
  font-size: 20px;
  line-height: 24px;
  color: #152844;
}

}

.buy-way {
  overflow: hidden;

.title {
  font-weight: 600;
  font-size: 18px;
  height: 26px;
  line-height: 26px;
  color: #152844;
  margin-bottom: 12px;
}

}

.thing-content-view {
  margin-top: 40px;
  padding-bottom: 50px;
}

.main-content {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;

.text {
  color: #484848;
  font-size: 16px;
  line-height: 26px;
  padding-left: 12px;
  margin: 11px 0;
  white-space: pre-wrap;
}

}

.main-tab {
  border-bottom: 1px solid #cedce4;
}

.order-view {
  position: relative;
  color: #6c6c6c;
  font-size: 14px;
  line-height: 40px;

.title {
  margin-right: 8px;
}

.tab {
  margin-left: 20px;
  cursor: pointer;
  color: #5f77a6;
  font-size: 16px;
  cursor: pointer;
}

.tab-select {
  color: #152844;
  font-weight: 600;
}

.tab-underline {
  position: absolute;
  bottom: 0;
  left: 84px;
  width: 16px;
  height: 4px;
  background: #4684e2;
  -webkit-transition: left .3s;
  transition: left .3s;
}

}

.recommend {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 235px;
  flex: 0 0 235px;
  margin-left: 20px;

.title {
  font-weight: 600;
  font-size: 18px;
  line-height: 26px;
  color: #152844;
  margin-bottom: 12px;
}

.things {
  border-top: 1px solid #cedce4;

.thing-item {
  min-width: 255px;
  max-width: 255px;
  position: relative;
  flex: 1;
  margin-right: 20px;
  height: fit-content;
  overflow: hidden;
  margin-top: 26px;
  margin-bottom: 36px;
  padding-bottom: 24px;
  border-bottom: 1px #e1e1e1 solid;
  cursor: pointer;

.img-view {
  /*/ / background: #f3f3f3;*/
  /*/ / text-align: center;*/
  height: 200px;
  width: 255px;

/*/ / border: 1 px #f3f3f3 solid;*/

img {
  height: 200px;
  width: 255px;
  overflow: hidden;
  margin: 0 auto;
  background-size: cover;
  object-fit: cover;
}

}

.info-view {
  /*/ / background: #f6f9fb;*/
  overflow: hidden;
  padding: 0 16px;

.thing-name {
  line-height: 32px;
  margin-top: 12px;
  color: #0F1111 !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  font-style: normal !important;
  text-transform: none !important;
  text-decoration: none !important;
}

.price {
  color: #ff7b31;
  font-size: 20px;
  line-height: 20px;
  margin-top: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.translators {
  color: #6f6f6f;
  font-size: 12px;
  line-height: 14px;
  margin-top: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

}
}

}
}

.thing-content-view {
  margin-top: 40px;
  padding-bottom: 50px;
}

.main-content {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;

.text {
  color: #484848;
  font-size: 16px;
  line-height: 26px;
  padding-left: 12px;
  margin: 11px 0;
  white-space: pre-wrap;
}

}
.main-tab {
  border-bottom: 1px solid #cedce4;
}

.order-view {
  position: relative;
  color: #6c6c6c;
  font-size: 14px;
  line-height: 40px;

.title {
  margin-right: 8px;
}

.tab {
  margin-right: 20px;
  cursor: pointer;
  color: #5f77a6;
  font-size: 16px;
  cursor: pointer;
}

.tab-select {
  color: #152844;
  font-weight: 600;
}

.tab-underline {
  position: absolute;
  bottom: 0;
  left: 84px;
  width: 16px;
  height: 4px;
  background: #4684e2;
  -webkit-transition: left .3s;
  transition: left .3s;
}

}
</style>